<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram</title>
</head>
<body>
    <canvas id="circuitCanvas" width="600" height="450" style="border:1px solid #d3d3d3;"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.font = '20px Arial';

        // --- Component Coordinates ---
        const batteryY = 100;
        const batteryStartX = 270;
        const batteryEndX = 370;

        const junctionB = { x: 150, y: 250 };
        const junctionG = { x: 450, y: 250 };

        const res1 = { y: 200, startX: 200, endX: 400, height: 20 };
        const res2 = { y: 300, startX: 200, endX: 400, height: 20 };

        // --- Draw Wires ---
        ctx.beginPath();
        // Top wire from battery to left vertical
        ctx.moveTo(batteryStartX, batteryY);
        ctx.lineTo(junctionB.x, batteryY);
        // Left vertical wire to junction B
        ctx.lineTo(junctionB.x, junctionB.y);

        // Top wire from battery to right vertical
        ctx.moveTo(batteryEndX, batteryY);
        ctx.lineTo(junctionG.x, batteryY);
        // Right vertical wire to junction G
        ctx.lineTo(junctionG.x, junctionG.y);

        // Wires from junction B to resistors
        ctx.moveTo(junctionB.x, junctionB.y);
        ctx.lineTo(junctionB.x, res1.y);
        ctx.lineTo(res1.startX, res1.y); // To top resistor
        ctx.moveTo(junctionB.x, junctionB.y);
        ctx.lineTo(junctionB.x, res2.y);
        ctx.lineTo(res2.startX, res2.y); // To bottom resistor

        // Wires from resistors to junction G
        ctx.moveTo(res1.endX, res1.y);
        ctx.lineTo(junctionG.x, res1.y);
        ctx.lineTo(junctionG.x, junctionG.y); // From top resistor
        ctx.moveTo(res2.endX, res2.y);
        ctx.lineTo(junctionG.x, res2.y);
        ctx.lineTo(junctionG.x, junctionG.y); // From bottom resistor

        ctx.stroke();

        // --- Draw Battery (3 cells) ---
        const cellWidth = (batteryEndX - batteryStartX) / 3;
        const longPlateHeight = 40;
        const shortPlateHeight = 20;

        for (let i = 0; i < 3; i++) {
            const cellStartX = batteryStartX + i * cellWidth;
            // Long plate (+)
            ctx.beginPath();
            ctx.moveTo(cellStartX + cellWidth * 0.25, batteryY - longPlateHeight / 2);
            ctx.lineTo(cellStartX + cellWidth * 0.25, batteryY + longPlateHeight / 2);
            ctx.stroke();
            // Short plate (-)
            ctx.beginPath();
            ctx.moveTo(cellStartX + cellWidth * 0.75, batteryY - shortPlateHeight / 2);
            ctx.lineTo(cellStartX + cellWidth * 0.75, batteryY + shortPlateHeight / 2);
            ctx.stroke();
        }

        // --- Draw Resistors ---
        ctx.strokeRect(res1.startX, res1.y - res1.height / 2, res1.endX - res1.startX, res1.height);
        ctx.strokeRect(res2.startX, res2.y - res2.height / 2, res2.endX - res2.startX, res2.height);

        // --- Draw Labels ---
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        // Point labels
        ctx.fillText('A', batteryStartX - 15, batteryY - 5);
        ctx.fillText('H', batteryEndX + 15, batteryY - 5);

        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        ctx.fillText('B', junctionB.x - 10, junctionB.y);

        ctx.textAlign = 'left';
        ctx.fillText('G', junctionG.x + 10, junctionG.y);

        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('C', res1.startX, res1.y - 15);
        ctx.fillText('D', res1.endX, res1.y - 15);

        ctx.textBaseline = 'top';
        ctx.fillText('E', res2.startX, res2.y + 15);
        ctx.fillText('F', res2.endX, res2.y + 15);

        // Resistor values
        ctx.textBaseline = 'bottom';
        ctx.fillText('3.0 \u03A9', (res1.startX + res1.endX) / 2, res1.y - 15);
        
        ctx.textBaseline = 'top';
        ctx.fillText('6.0 \u03A9', (res2.startX + res2.endX) / 2, res2.y + 15);

        // Figure label
        ctx.font = 'bold 20px Arial';
        ctx.textBaseline = 'bottom';
        ctx.fillText('Fig. 9.1', canvas.width / 2, canvas.height - 20);

    </script>
</body>
</html>